<!-- 月能源看板 -->
<template>
  <div class="energyConservation">
    <div class='card date'>
      <el-radio-group v-model="date_radio" size="mini">
        <el-radio-button label="1">昨日</el-radio-button>
        <el-radio-button label="2">今日</el-radio-button>
        <el-radio-button label="3">近一个月</el-radio-button>
      </el-radio-group>
      <div>{{date}}</div>
    </div>
    <el-row :gutter="12">
      <el-col :xs="24" :sm="24" :md="24" :lg="15" :xl="15">
        <div class="card">
          <!-- <Mtitle title="用能状况"></Mtitle> -->
          <div class='img_p' @click="open()">
            <h2>河南三浦百草生物工程有限公司工艺系统流程</h2>
            <div class='img_c'>
              <div class='shebei a'>
                <div>
                  <img src="../../../../public/JN/空压机图片.png" alt="">
                  <div class='line dianlixitong'>电力系统</div>
                  <div class='line fajiaochejian'>发酵车间</div>
                  <div class='line c_line_1'></div>
                  <div class='line c_line_2'></div>
                  <div class='line c_line_3'></div>
                </div>
                <p>空压机系统</p>
              </div>
              <div class='shebei b'>
                <div>
                  <img src="../../../../public/JN/制冷机站.png" alt="">
                  <div class='line c_line_2'></div>
                </div>
                <p>制冷机系统</p>
              </div>
              <div class='shebei c'>
                <div>
                  <img src="../../../../public/JN/锅炉图片.png" alt="">
                  <div class='line c_line_2'></div>
                  <div class='line dianlixitong'>天然气</div>
                  <div class='line fajiaochejian'>提取车间</div>
                  <div class='line line1'></div>
                  <div class='line line2'></div>
                  <div class='line line3'></div>
                  <div class='line line4'></div>
                  <div class='line line5'></div>
                  <div class='line line6'></div>
                  <div class='line line7'></div>
                  <div class='line line8'></div>
                  <div class='line line9'></div>
                </div>
                <p>锅炉系统</p>
              </div>
              <div class='shebei d'>
                <div>
                  <img src="../../../../public/JN/循环水泵图片.png" alt="">
                  <div class='line dianlixitong'>水</div>
                  <div class='line fajiaochejian'>污水车间</div>
                  <div class='line c_line_1'></div>
                  <div class='line c_line_2'></div>
                </div>
                <p>循环水系统</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <!-- <Mtitle title>
            <el-radio-group v-model="radio3" size="mini">
              <el-radio-button label="1">空压机系统</el-radio-button>
              <el-radio-button label="2">锅炉系统</el-radio-button>
            </el-radio-group>
          </Mtitle> -->

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="空压机系统" name="01"></el-tab-pane>
            <el-tab-pane label="锅炉系统" name="02"></el-tab-pane>
          </el-tabs>
          <ecline2 width="100%" height="305px" :ecdata="ecdata"></ecline2>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
        <el-scrollbar style="height:800px">
          <div class="card list" v-for="(item,index) in 3" :key="index">
            <div class='zhankai' @click="list_01_show_click('')">
              <i class='el-icon-d-arrow-left'></i>
            </div>
            <h2>压缩空气系统</h2>
            <div class="details">
              <div class='row'>
                <div>
                  <p class='num dengji'>
                    <!-- <span class='zhizhen'></span> -->
                    <!-- <span class='jibie'>333</span> -->
                    <ecgauge style='margin-top:14px' width='100%' height='100%' :ecdata='[]'></ecgauge>
                  </p>
                  <p class='name'>
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div>
                  <p class='num gonglv'>
                    <echartsLiquidfill width='100%' height='100%' v-if='index===1' :ecdata='16.7'></echartsLiquidfill>
                    <echartsLiquidfill width='100%' height='100%' v-else :ecdata='66.7'></echartsLiquidfill>
                  </p>
                  <p class='name'>
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div class="">
                  <p class="num dianhao">
                    0.0069
                  </p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
              </div>
              <div class="row">
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
              </div>
              <div class="row">
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <div class="">
                  <p class="num">100</p>
                  <p class="name">
                    总供气流量
                    <span class="unit">(m³/min)</span>
                  </p>
                </div>
                <!-- <div class='show' @click="list_01_show_click('open')">
                <i class='el-icon-more' style='font-size:24px'></i>
              </div> -->
              </div>
            </div>
            <!-- <transition name="el-zoom-in-center"> -->
            <div :class="['list_c', {'list_c_show':list_01_show}]">
              <div class='zhankai' @click="list_01_show_click('')">
                <i class='el-icon-d-arrow-right'></i>
              </div>
              <div class="row_100">
                <div class='icon'>
                  <i>i</i>
                </div>
                <div>空气泄漏率</div>
                <el-progress :show-text='false' style='flex:1' :text-inside="true" :stroke-width="18" :percentage="75" status="success"></el-progress>
                <div class='num'>{{100}}%</div>
              </div>
              <div class="row_100">
                <div class='icon'>
                  <i>i</i>
                </div>
                <div>空气泄漏率</div>
                <el-progress :show-text='false' style='flex:1' :text-inside="true" :stroke-width="18" :percentage="75" status="success"></el-progress>
                <div class='num'>{{100}}%</div>
              </div>
              <div class="row_100">
                <div class='icon'>
                  <i>i</i>
                </div>
                <div>空气泄漏率</div>
                <el-progress :show-text='false' style='flex:1' :text-inside="true" :stroke-width="18" :percentage="75" status="success"></el-progress>
                <div class='num'>{{100}}%</div>
              </div>
            </div>
            <!-- </transition> -->
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VBar from 'v-bar'
// import day from "@/utils/day.js"
import Mtitle from '@/components/Mtitle'
import ecline2 from '@/components/echarts/ec_line_2'
import ecgauge from '@/components/echarts/ec_gauge'
import dayjs from 'dayjs'
// import pie from '@/components/echarts/ec_pie_3.vue'
// import tb from '@/components/table'
import './index.scss'
// import pagination from '@/components/pagination'
import echartsLiquidfill from '@/components/echarts/echartsLiquidfill'
import ecpic180 from '@/components/echarts/ec_pic_180'


export default {
  components: {
    VBar,
    Mtitle,
    ecgauge,
    // tb,
    // ecline,
    // pie,
    // pagination,
    ecline2,
    echartsLiquidfill,
    ecpic180
  },
  data() {
    return {
      activeName: '01',
      date: '',
      date_radio: '2',
      Today: '',
      Yesterday: '',
      Amonth: '',
      ecdata: [
        {
          name: 'a',
          value: [{
            time: '2015-01-01',
            value: 1000
          },
          {
            time: '2015-01-02',
            value: 1100
          },
          {
            time: '2015-01-03',
            value: 1200
          },
          {
            time: '2015-01-04',
            value: 1300
          },
          {
            time: '2015-01-05',
            value: 1200
          },
          {
            time: '2015-01-06',
            value: 1100
          }
          ]
        },
        {
          name: 'b',
          value: [{
            time: '2015-01-01',
            value: 100
          },
          {
            time: '2015-01-02',
            value: 200
          }, {
            time: '2015-01-03',
            value: 300
          }
            , {
            time: '2015-01-04',
            value: 200
          }, {
            time: '2015-01-05',
            value: 100
          }, {
            time: '2015-01-06',
            value: 50
          }
          ]
        }
      ],
      list_01_show: false,
      radio3: '1'
    }
  },
  mounted() {
  },
  created() {
    this.Today = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
    this.Yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
    this.Amonth = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
    this.date = dayjs().subtract(0, 'day').format('YYYY-MM-DD HH:mm')

  },
  methods: {

    open(path) {
      this.$router.push('/analysis/monthEnergy/operationMonitoring')
    },
    list_01_show_click(type) {
      // if (type === 'open') {
      //   document.documentElement.scrollTop = document.body.scrollTop = 0
      // }
      this.list_01_show = !this.list_01_show
    }
  }
}
</script>
 <style scoped lang='scss'>
</style>
